<template>
    <div>
        <div class="chooseWrapper" v-if="pageStatus === 0">
            <div class="chooseWrapper-item">
                <span class="title">快速注册小程序</span>
                <span class="title-desc">
                    填写企业信息并完成法人身份即可快速创建认证小程序无需认证费用，立即得到审核结果
                </span>
                <div class="opt">
                    <div class="opt-sta" v-if="!auth.status">
                        <div></div>
                        <el-button class="btn mt20" type="primary" @click="registHandler(1)"> 去注册 </el-button>
                    </div>
                    <div class="opt-sta" v-if="auth.status === 1">
                        <div class="opt-sta_bck">
                            <div class="opt-sta_bck__ot">
                                <img src="@/assets/imgs/sys/wechat-auth.png" />
                                <span class="status-desc">{{ auth.statusDesc }}</span>
                            </div>
                            <span class="opt-sta_bck__info">等待微信审核</span>
                        </div>
                        <el-button type="primary" class="mt20" plain @click="viewHandler"> 查看填写内容 </el-button>
                    </div>
                    <div class="opt-sta" v-if="auth.status === 3">
                        <div class="opt-sta_bck">
                            <div class="opt-sta_bck__ot ot-fail">
                                <img src="@/assets/imgs/sys/wechat-fail.png" />
                                <span class="status-desc fail">{{ auth.statusDesc }}</span>
                            </div>
                            <span class="opt-sta_bck__info fail"> 失败原因：{{ auth.errMsg }} </span>
                        </div>
                        <el-button class="btn mt20" type="primary" @click="registHandler(1)">重新注册</el-button>
                    </div>
                </div>
            </div>
            <div class="chooseWrapper-item">
                <span class="title">复用公众号资质创建小程序</span>
                <span class="title-desc">绑定已认证公众号即可一键注册认证小程序无需认证费用，立即得到审核结果</span>
                <div class="opt">
                    <div class="opt-sta">
                        <div></div>
                        <el-tooltip
                            v-if="auth.status === 1"
                            class="box-item"
                            effect="dark"
                            content="快速注册小程序正在审核中，无法再次注册"
                            placement="top">
                            <span class="mt20">
                                <el-button class="btn" type="primary" disabled>去注册</el-button>
                            </span>
                        </el-tooltip>
                        <el-button v-else class="btn mt20" type="primary" @click="officialHandler(4)">去注册</el-button>
                    </div>
                </div>
            </div>
        </div>
        <Corporate
            v-if="pageStatus === 1"
            :row="auth"
            @submit="corporateSubmitHandler"
            @cancel="corporateCancelHandler">
        </Corporate>

        <el-dialog v-model="visible" width="40%">
            <template #header>
                <span>填写内容</span>
            </template>
            <template #default>
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="法人姓名" label-align="right">
                        {{ auth.legalPersonName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="法人微信号" label-align="right">
                        {{ auth.legalPersonWechat }}
                    </el-descriptions-item>
                    <el-descriptions-item label="企业名称" label-align="right">
                        {{ auth.businessName }}
                    </el-descriptions-item>
                    <el-descriptions-item label="企业代码类型" label-align="right">
                        {{ transformStream(auth.codeType, 'COMPANY_CODE_TYPE') }}
                    </el-descriptions-item>
                    <el-descriptions-item label="企业代码" label-align="right">
                        {{ auth.code }}
                    </el-descriptions-item>
                    <el-descriptions-item label="联系电话" label-align="right">
                        {{ auth.componentPhone }}
                    </el-descriptions-item>
                </el-descriptions>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import Corporate from '@/views/sys/mp/register/corporate.vue';
import request from '@/request';
import { isNotEmpty } from '@/commons/utils';

// 0-选择注册小程序方式 1-法人提交信息 2-提交列表 3-完成返回appid 4-复用公众号资质
const pageStatus = ref(0);
const visible = ref(false);

const auth = reactive({
    legalPersonName: '',
    legalPersonWechat: '',
    businessName: '',
    status: '',
    statusDesc: '',
    errMsg: '',
    codeType: '',
    code: '',
    componentPhone: ''
});

onMounted(() => {
    queryInfoHandler();
});

/**
 * 初始化信息
 */
const queryInfoHandler = async () => {
    const { data } = await request('miniappSetCompanyLogServ');
    if (isNotEmpty(data.list)) {
        Object.assign(auth, data.list[0]);
    }
};

/**
 * 去注册
 */
const registHandler = () => {
    pageStatus.value = 1;
};

/**
 * 查看内容
 */
const viewHandler = () => {
    visible.value = true;
};

/**
 * 提交注册信息
 * @param {*} val
 */
const corporateSubmitHandler = val => {
    request('miniappSetCompanyInfoServ', val).then(res => {
        pageStatus.value = 0;
        queryInfoHandler();
    });
};

/**
 * 法人注册取消
 */
const corporateCancelHandler = () => {
    pageStatus.value = 0;
};

/**
 * 跳转到微信注册流程
 */
const officialHandler = () => {
    const url = 'https://' + window.location.host + '/mp/redirect?type=pub';
    request('miniappAuthLinkServ', {
        callbackFrontUrl: url,
        authType: 1
    }).then(res => {
        const url = res.data.url;
        if (url) {
            window.location = url;
        }
    });
};
</script>
<style lang="scss" src="./index.scss" scoped></style>
